import React from "react"
import { useEffect,useState } from 'react'
import { fetchLists } from './utils/api'
import style from './assets/style.css'
import CnLists from "./components/CnLists"
import CnLoading from "./components/CnLoading"
import CnHeader from "./components/CnHeader"
import CnFooters from "./components/CnFooters"
export default ()=>{
    let [list, setList] = useState([])
    let [tab, setTab] = useState('')
    let [page, setPage] = useState(1)
    let [load,setLoad]=useState(true)
    let carts = [{
        id: 1,
        label: '全部',
        tab: ''
    },
    {
        id: 2,
        label: '问答',
        tab: 'ask'
    },
    {
        id: 3,
        label: '分享',
        tab: 'share'
    },
    {
        id: 4,
        label: '招聘',
        tab: 'job'
    },
    {
        id: 5,
        label: '精华',
        tab: 'good'
    },
    ]
    let data = {
        page: page,
        tab: tab,
        limit: 10
    }
    useEffect(() => {
        fetchLists(data).then(list => {
            console.log(list);
            setList(list)
            setLoad(false)
        })
        return () => {}
    }, [tab,page])
    function changePage(e){
        setPage(e)
        console.log(e);
    }
    function changeTab(e){
        setTab(e)
        setPage(1)
        console.log(e);
    }
    return(
        <div id="app" className="app">
            {/* 头部导航 */}
            <CnHeader onTab={e=>changeTab(e)} tab={tab}carts={carts}/>
           {/* 加载loading */}
            <CnLoading load={load}/>
            {/* 列表显示 */}
            <CnLists list={list} carts={carts}/>
            {/* 分页器 */}
            <CnFooters onCurrent={e => changePage(e)} onPrev={e => changePage(e)} onNext={e=>changePage(e)} pages={page}/>
        </div >
    )
}